
<template>
  <div class="index-box" ref="index">
    <div class="backBox">
        <span class="back" @click="back"><i class="el-icon-back"></i>返回</span>
    </div>
    <div class="shop-box" v-loading="loading">
      <div class="d-flex">
        <div class="left">
          <el-form  :model="form" size="medium" ref="form"  class="form" :rules="rules" label-position="top">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="headerTitle">商品信息</span>
              </div>
              <div  class="text item">
                <el-form-item label="主图上传" prop="goodsImage">
                  <span slot="label">
                    主图上传
                  </span>
                    <div class="d-flex">
                        <img src="" alt="">
                        <MyUpMoreImg  :imagePreview='form.goodsImage'  imageLimit="1" text='上传主图' @change="imageChange($event)"></MyUpMoreImg>
                    </div>
                </el-form-item>
                <el-form-item label="商品标题" prop="goodsName">
                  <span slot="label">
                    商品标题
                  </span>
                  <h3>{{form.goodsName}}</h3>

                </el-form-item>

               <!-- <el-form-item label="商品规格" prop="rule">
                   <span slot="label" ><span class="red">*</span>商品规格</span>
                  <div v-for="(item,index) in form.goodsSkuStockParamsList" class="rows">
                       <el-input v-model="item.specName" class="input" placeholder="请输入规格名称" />
                       <el-button class="table-btn" icon="el-icon-add" size="small"  @click="tagDeltRow(item,index)" v-if="index!='0'">删除当前行</el-button>
                  </div>
                  <div>
                    <el-button class="table-btn" icon="el-icon-add" size="small" type="primary" plain  @click="tagAddRow('rule')" v-show="!(form.goodsSkuStockParamsList.length>6)">增加规格</el-button>
                  </div>
                </el-form-item> -->

                <el-form-item label="价格与库存" prop="goodsSkuStockParamsList">
                  <span slot="label" ><span class="red">*</span>价格与库存</span>
                  <el-table :data="auditData.goodsSkuStockParamsList" style="width: 100%"  border stripe >
                    <el-table-column prop="specification" label="规格">
                      <template #default="scope">
                         {{scope.row.specName}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="stockNum"  label="库存">
                      <template #header>
                        <span class="red">*</span>库存(件)
                      </template>
                      <template #default="scope">
                        {{scope.row.stockNum}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="costPrice"  label="成本价(元)">
                      <template #header><span class="red">*</span>成本价(元)</template>
                      <template #default="scope">
                        {{scope.row.costPrice}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="originalPrice"  label="原价(元)">
                      <template #header>
                        <span class="red">*</span>原价(元)
                      </template>
                      <template #default="scope">
                        {{scope.row.originalPrice}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="salePrice"  label="平台售价(元)">
                      <template #header>
                        <span class="red">*</span>平台售价(元)
                      </template>
                      <template #default="scope">
                        <el-input v-model="scope.row.salePrice" class="input" placeholder="请输入平台售价" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="unit"  label="单位">
                      <template #default="scope">
                        {{scope.row.unit}}
                      </template>
                    </el-table-column>
                   <!-- <el-table-column prop="name"  label="操作">
                      <template #default="scope">
                        <el-button
                            size="medium"
                            type="text"
                            icon="el-icon-s-tools"
                            @click="setDetailList(scope.$index)"
                          >设置团购详情</el-button>
                      </template>
                    </el-table-column> -->
                  </el-table>
                  <p class="red" style="margin: 0px;">{{tips}}</p>
                </el-form-item>

               <el-form-item label="预览" prop="goodsDetails" v-if="form.goodsSkuStockParamsList[0].specName">
                 <div class="box">
                   <div class="boxTop">
                     <div class="botTopItem" :class="{'botTopItemActive':index==boxIndex}" v-for="(item,index) in form.goodsSkuStockParamsList" @click="boxIndex=index" >
                       {{item.specName}}
                     </div>
                   </div>
                   <div class="boxContent" v-for="(item,index) in form.goodsSkuStockParamsList" v-if="index==boxIndex">
                     <!-- <div class="boxContentTitle">
                       <span class="dian"></span>{{form.goodsName}}
                     </div> -->
                     <div class="" v-for="(item1,index1) in JSON.parse(item.specDetails)">
                       <div class="boxContentItem">
                         <div class="bciLeft d-flex align-center">
                           <span class="dian" v-if="item1.children.length"></span>{{item1.name}}
                         </div>
                         <div class="bciRight" v-if="!item1.children.length">
                           <span class="bciRNumber">({{item1.number}}份)</span>
                           <span class="bciRNumber">¥{{item1.price}}</span>
                           <span class="bciRNumber">{{item1.content}}</span>
                         </div>
                       </div>
                       <div class="boxContentItemChild" style="padding-left:8px;border-bottom: 1px solid #ddd;" v-if="item1.children.length">
                         <div class="boxContentItem" v-for="(item2,index2) in item1.children">
                            <div class="bciLeft d-flex align-center">
                              {{item2.name}}
                            </div>
                            <div class="bciRight">
                              <span class="bciRNumber">({{item2.number}}份)</span>
                              <span class="bciRNumber">¥{{item2.price}}</span>
                              <span class="bciRNumber">{{item2.content}}</span>
                            </div>
                          </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </el-form-item>

                <el-form-item label="商品使用规则说明" prop="goodsDetails">
                  <div v-html="form.goodsDetails"></div>
                </el-form-item>

                <el-form-item label="商品有效时间" prop="useTime">
                  {{form.validTime}}
                </el-form-item>

                <el-form-item label="单次限购数量" prop="limitBuyNumber">
                  {{form.limitBuyNumber}}
                </el-form-item>

                <el-form-item label="商品保障">
                  {{form.guarantee}}
                </el-form-item>
                <el-form-item label="使用规则">
                  <div v-html="form.useRule"></div>
                </el-form-item>
                <el-form-item label="使用时间">
                  {{form.useTime}}
                </el-form-item>

              </div>
            </el-card>
          </el-form>
        </div>
      </div>
    </div>
    <div style="width:100%;marign:0 auto;display:flex;justify-content:center;padding-bottom:10px">
      <div>备注</div>
      <div><el-input v-model="auditData.remarks" type="textarea" autocomplete="off" :rows="4" stsyle="width:400px" placeholder="请填写审核备注"></el-input></div>
    </div>
    <div class="activeBox">

     <el-button type="info" @click="handleAudit('2')">驳回</el-button>
     <el-button type="primary" @click="handleAudit('1')">通过</el-button>
    </div>

  </div>
</template>

<script>
  import { BgetGoodsDetails,BauditGoods } from '@/api/getData';
  import option from '../../common/option.js';
  import common from "@/api/api";
  import { regionData,CodeToText } from 'element-china-area-data';
  import QuillEditor from '@/components/QuillEditor/quillEditor'

  export default {
    name:'shopDetails',
    components: { QuillEditor },
    inject: ['reload'],
    data() {
      let that = this
      return {
        loading:false,
        imgVisible:false,
        btnLoading:false,
        type:'',
        imagePreview: '',
        imageSource: '',
        tips:'',
        form:{
          goodsName:'',
          goodsImage:[],
          goodsSkuStockParamsList:[{
            specName:'',//规格名称
            cargoNo:'',//货号
            costPrice:"",//成本价
            originalPrice:'',//原价
            salePrice:'',//平台售价
            stockNum:'',//库存数量
            unit:"",//单位
            specDetails:'[]',//规格详情JSON
          }],
          goodsDetails:'',
          limitBuyNumber:"",
          validTime:[],

          guarantee:'', // 商品保障
          useRule:'',//  使用规则
          useTime:''// 使用时间
        },

        rules: {
          goodsImage: [{required: true, message: '请上传商品组图',trigger: 'blur'}],
          attachmentIds: [{required: true, message: '请上传商品图片',trigger: 'blur'}],
          goodsName: [{required: true, message: '请输入商品名称',trigger: 'blur'}],
          limitBuyNumber: [{required: true, message: '请输入单次限购数量',trigger: 'blur'}],
          useTime: [{required: true, message: '请选择商品使用时间',trigger: 'blur'}],
        },

        detailIndexStatus:'',
        specDetails:[],//规格详情
        detailVisible:false,
        detailTitle:'',

        boxIndex:0,

        auditData: {
          goodsId: '',
          auditResult :'',//1同意 2驳回
          remarks:'',
          goodsSkuStockParamsList:[]
        },
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.type = this.$route.query.type;
			this.goodsId = this.$route.query.goodsId;
			this.form.goodsId = this.$route.query.goodsId;
      this.auditData.goodsId = this.$route.query.goodsId;

      if(this.goodsId){
        this.editDataInfo(this.goodsId);
      }
    },
    methods: {
      handleAudit(auditResult){
        for(let i=0;i<this.auditData.goodsSkuStockParamsList.length;i++){
          if(!this.auditData.goodsSkuStockParamsList[i].salePrice){
            this.$modal.msgError('请填写平台售价');
            return;
          }
        }
        this.auditData.auditResult = auditResult;
        BauditGoods(this.auditData).then((result) => {
          if (result.code == 200) {
            this.$message.success(result.msg);
            this.$router.go(-1);//返回上一层
          } else {
            this.$message.error(result.msg);
          }
        });
      },
      editDataInfo(){
        BgetGoodsDetails({goodsId:this.goodsId}).then((result) => {
          let goodsInfo = result.data.goodsInfo;
          let skuStockList = result.data.skuStockList;
          if (result.code == 200) {
            this.form.goodsName = goodsInfo.goodsName;
            this.form.goodsImage = goodsInfo.goodsImage.split(',');
            this.form.goodsDetails = goodsInfo.goodsDetails;
            this.form.limitBuyNumber = goodsInfo.limitBuyNumber;
            this.form.validTime = goodsInfo.validTime?goodsInfo.validTime.split(','):[];

            this.form.goodsSkuStockParamsList = skuStockList;

            this.form.guarantee = goodsInfo.guarantee;
            this.form.useRule = goodsInfo.useRule;
            this.form.useTime = goodsInfo.useTime;

            this.auditData.goodsSkuStockParamsList = skuStockList;

          } else {
            this.$message.error(result.message);
          }
        });
      },
      imageChange(path) {
        console.log(path);
        this.form.goodsImage = path;
      },
      setDetailList(index){/* 弹框设置团购详情 */
        this.specDetails = JSON.parse(this.form.goodsSkuStockParamsList[`${index}`].specDetails);
        this.detailTitle = this.form.goodsSkuStockParamsList[`${index}`].specName+'团购详情';
        this.detailIndexStatus = index;
        this.detailVisible = true;
      },
      handleSureDetail(){
        for(let i=0;i<this.specDetails.length;i++){
          if(!this.specDetails[i].name || !this.specDetails[i].number || !this.specDetails[i].price){
            this.$modal.msgError('请填写完整输入框');
            return;
          }
        }
        this.form.goodsSkuStockParamsList[`${this.detailIndexStatus}`].specDetails = JSON.stringify(this.specDetails);
        this.detailVisible = false;
      },
      deltDetailRow(index){/* 删除团购详情当前列 */
        this.specDetails.splice(index,1);
      },
      addDetailRow(){/* 新增团购详情一列 */
        if(this.specDetails.length==10){
          this.$modal.msgError('最多添加十行');
          return;
        }
        this.specDetails.push({name:'',number:'',price:''});
      },

       tagDeltVal(parentIndex,index,type){
          if(type=='params'){
             this.parameterList[parentIndex].child.splice(index,1);
          }else{
            this.ruleList[parentIndex].child.splice(index,1);
          }
          this.dataInfo();
       },
       tagAddRow(type,parentIndex){/* 添加规格 */
         if(this.form.goodsSkuStockParamsList.length=='6'){
           this.$modal.msgError('最多添加六行');
           return;
         }
         this.form.goodsSkuStockParamsList.push({
            specName:'',//规格名称
            cargoNo:'',//货号
            costPrice:"",//成本价
            originalPrice:'',//原价
            salePrice:'',//平台售价
            stockNum:'',//库存数量
            unit:"",//单位
            specDetails:'[]',//规格详情JSON
          })
       },
      tagDeltRow(index,type){/*删除当前行*/
        this.form.goodsSkuStockParamsList.splice(index,1);
      },
      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            for(let i=0;i<this.form.goodsSkuStockParamsList.length;i++){
              if(!this.form.goodsSkuStockParamsList[i].specName){
                this.tips = '请填写规格名称';
                return;
              }else if(!this.form.goodsSkuStockParamsList[i].stockNum){
                this.tips = '请填写库存';
                return;
              }else if(!this.form.goodsSkuStockParamsList[i].costPrice){
                this.tips = '请填写成本价';
                return;
              }else if(!this.form.goodsSkuStockParamsList[i].originalPrice){
                this.tips = '请填写原价';
                return;
              }else if(!this.form.goodsSkuStockParamsList[i].salePrice){
                this.tips = '请填写平台售价';
                return;
              }
            }
            this.tips = '';
            this.btnLoading = true;
            let data = JSON.parse(JSON.stringify(this.form))
            data.goodsImage = data.goodsImage.join(',');
            if(data.useTime.length){
              data.useTime = data.useTime.join(',');
            }
            addGoods(data).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);

              } else {
                this.$message.error(result.message);
              }
              this.btnLoading = false;
            });
          }
        })
      },
      back(){
          this.$router.go(-1);//返回上一层
      },
    }
  }
</script>

<style scoped lang="scss">
  .box{
     width:380px;
     border:1px solid #999;
     border-radius: 10px;
     padding:15px;
  }
  .boxTop .botTopItem.botTopItemActive{
    border: 1px solid #FC5173;
    background: rgba(252,81,115,0.05);
  }
  .boxTop{
    display: flex;
  }
  .boxTop .botTopItem{
   padding:0 20px;

    height: 100rpx;
    background: #F1F1F1;
    border-radius: 10px;
    color:#666;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right:20px;
  }
  .boxContentTitle{
    display: flex;
    color:#333;
    align-items: center;
  }
  .dian{
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background-color:#333;
    font-size: 20px;
    margin-right:5px;
  }
  .boxContentItem{
    display: flex;
    width: 100%;
    justify-content: space-between;
       padding-left:10px;
  }
  .bciRNumber{
    margin-right:10px;
  }

  .tableBox /deep/ .el-form-item__content{
    width:100%;
    overflow-x: auto;
  }
  .shop-box /deep/ .el-form-item__label{
    padding:0px;
  }
  .miniTips{
    font-size: 12px;
    color:#CCC4CC;
    padding-left:4px;
  }
  .box-card{
    margin-bottom: 15px;
  }
  .headerTitle{
    font-size: 16px;
    font-weight: bold;
  }
	.index-box /deep/ .ql-editor{
		min-height: 300px;
	}
	.boxs /deep/ .el-radio-group{
  	display: flex;
  	flex-wrap: wrap;
  }
  .boxs /deep/ .el-radio-group .el-radio{
  	width:100%;
  	margin-bottom: 10px;
  }
  .activeBox{
    display:flex;
    justify-content:center;
  }
  .upGoodBox{
    height:100px;
    display:flex;
    align-items:center;
    justify-content: center;
    background: rgba(158, 187, 169, 0.15);
    color:#3A7654;
    margin-bottom:20px;
  }
  .shop-box{
    margin: 0 auto;
    .left{
      width:80%;
      padding:0 10px;
      margin: auto;
    }
    // .right{
    //   width:35%;
    //   padding:0 10px;
    // }
  }
  .el-checkbox-group{
    display: flex;
    flex-direction: column;
  }
  .jobNumber{
    text-align:center;
    color:#606266;
    margin:0;
  }
  .index-box /deep/ .el-checkbox{
    margin-bottom:15px;
  }
  .auditBox{
    padding: 20px 50px;
    background: rgba(158, 187, 169, 0.15);
    margin-bottom:20px;
    .steps{
      max-width:500px;
      margin:0 auto;
    }
  }
  .goodSet{
    padding: 50px 50px 30px 50px;
    background: rgba(158, 187, 169, 0.15);
    margin-bottom:20px;
    color:#606266;
    .title{
      text-align: center;
      font-size:18px;
      margin-bottom:10px;
    }
  }
  .el-icon-edit-outline{
    color: rgb(97, 153, 122);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  /*.myQuillEditor{
    height:250px;
  }*/
  table {
    width: 100%;
  }

  th {
    height: 50px;
    text-align: left;
    border-bottom: 1px solid #EBEEF5!important;
    color:#909399;
    padding:0 5px;

  }
  table{
    border: 1px solid #EBEEF5;
  }
  td, th{
    border:none;
    white-space: nowrap;
    min-width: 80px;
  }
  td{padding:5px}
  .index-box{
    height:100%;
    overflow-y: auto;
  }
  .shop-box{
    margin: 0 auto;
    .left{
      width:75%;
      padding:0 10px;
    }
    .right{
      width:35%;
      padding:0 10px;
    }
  }
  .rows>div,.rows>button{
    margin-bottom: 5px;
  }
  .input{
    width:150px;
    margin-right:10px;
  }
  .form{
    padding:20px 0;
  }
   .form /deep/ .avatar-uploader .el-upload-list__item{display: none;}
  .avatar-uploader{
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      height:100px;
      width:100px;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
        height: 30px;
        line-height: 30px;
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 28px;
        color: #8c939d;
    }
    .d-flex /deep/ .el-upload{
      display: block;
    }
    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
    .text{
      margin: 0px;
      color: #8c939d;
    }
    .upImg /deep/ .el-upload--text{
      height:100%
    }
    .activeBox{
      display: flex;
      justify-content: center;
    }
    .el-upload-list--picture-card .el-upload-list__item{
        width:100px;
        height:100px;
    }
</style>
